<template>
  <Form :model="formState" ref="formRef" class="md:flex-row w-full flex-wrap" v-bind="formItemLayout">
    <div class="md:flex w-full md:justify-start">
      <Col :span="6">
        <FormItem name="stepType" style="width: 165px" label="租户">
          <div class="md:w-30">
            <Select v-model:value="tenantCode" placeholder="请选择租户" :options="tenantOptions" :allowClear="true"> </Select>
          </div>
        </FormItem>
      </Col>
      <Col :span="6">
        <FormItem name="appId" style="width: 185px" label="应用">
          <div class="md:w-30">
            <Select v-model:value="appId" placeholder="请选择应用" :options="appOptions" :allowClear="true"> </Select>
          </div>
        </FormItem>
      </Col>
    </div>
    <div class="md:flex w-full md:justify-between">
      <div class="md:flex md:justify-start">
        <Col :span="10">
          <FormItem name="stepType" label="步长">
            <div class="md:w-18">
              <Select v-model:value="step" :options="stepType" :allowClear="true" @change="onSelectChange"> </Select>
            </div>
          </FormItem>
        </Col>
        <Col :span="20">
          <FormItem name="time" label="时间">
            <div class="md:flex">
              <RangePicker v-model:value="timeValue" :picker="mode" :disabled="pickerDisabled" :format="format"> </RangePicker>
            </div>
          </FormItem>
        </Col>
      </div>
      <Col :span="2">
        <FormItem>
          <div class="md:flex md:justify-end">
            <Button type="primary" shape="circle" @click="onSubmit">
              <template #icon><SearchOutlined /></template>
            </Button>
            <Button style="margin-left: 5px" shape="circle" @click="resetForm">
              <template #icon> <RedoOutlined /> </template>
            </Button>
          </div>
        </FormItem>
      </Col>
    </div>
  </Form>
</template>

<script setup lang="ts">
import { defineEmits, reactive, ref, onMounted } from 'vue';
import { Moment } from 'moment';
import { Button, Col, Form, FormItem, Select, RangePicker } from 'ant-design-vue';
import { SearchOutlined, RedoOutlined } from '@ant-design/icons-vue';
import { AppTemplateResp, TenantListResp } from '/@/api/operation-center/common/model/commonModel';
import { getAppSelectList, getTenantSelectList } from '/@/api/operation-center/common/common';
import { AppSubAnalysisByTenantReqDto } from '/@/api/operation-center/tenant-opertation/app-subscription-analysis/model/appSubscriptionModel';

const formRef = ref();

const formState = reactive<Record<string, any>>({});

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 24 },
};

// Select 组件属性设置
const tenantCode = ref();
const tenantOptions = ref<any[]>([]);

const appId = ref();
const appOptions = ref<any[]>([]);

const step = ref();
const stepType = [
  { label: '按月', value: 0 },
  { label: '按年', value: 1 },
];

const startPlaceholder = ref<string>('开始月份');
const endPlaceholder = ref<string>('结束月份');
const format = ref<string>('YYYY-MM');
const pickerDisabled = ref<boolean>(true);
const mode = ref<any>('month');
const timeValue = ref<[Moment, Moment]>();

const onSelectChange = (val) => {
  if (typeof val == 'undefined') {
    pickerDisabled.value = true;
  } else if (val !== 0 && !val) {
    pickerDisabled.value = true;
  } else if (val === 0) {
    pickerDisabled.value = false;
    startPlaceholder.value = '开始月份';
    endPlaceholder.value = '结束月份';
    mode.value = 'month';
    format.value = 'YYYY-MM';
  } else if (val === 1) {
    pickerDisabled.value = false;
    startPlaceholder.value = '开始年份';
    endPlaceholder.value = '结束年份';
    mode.value = 'year';
    format.value = 'YYYY';
  } else {
    pickerDisabled.value = true;
  }
};

const emit = defineEmits(['success']);
// 提交表单参数
const onSubmit = async () => {
  formRef.value.validate().then(() => {
    let appSubAnalysisByTenantReq: AppSubAnalysisByTenantReqDto = {
      tenantCode: tenantCode.value,
      appId: appId.value,
      stepType: step.value,
      startTime: timeValue.value[0].format('YYYY-MM-DD HH:mm:ss'),
      endTime: timeValue.value[1].format('YYYY-MM-DD HH:mm:ss'),
    };
    emit('success', appSubAnalysisByTenantReq);
  });
};

// 清空表单参数
const resetForm = () => {
  tenantCode.value = undefined;
  appId.value = undefined;
  step.value = undefined;
  timeValue.value = undefined;
  pickerDisabled.value = true;
};

function convertAppOptions(res: AppTemplateResp[]) {
  let options: any[] = [];
  for (let i = 0; i < res.length; i++) {
    let appItem = res[i];
    let appOption = {
      label: appItem.name,
      value: appItem.id,
    };
    options.push(appOption);
  }
  appOptions.value = options;
}

function convertTenantOptions(res: TenantListResp[]) {
  let options: any[] = [];
  for (let i = 0; i < res.length; i++) {
    let tenantItem = res[i];
    let tenantOption = {
      label: tenantItem.name,
      value: tenantItem.code,
    };
    options.push(tenantOption);
  }
  tenantOptions.value = options;
}

onMounted(() => {
  getTenantSelectList().then((res) => {
    convertTenantOptions(res);
  });

  getAppSelectList().then((res) => {
    convertAppOptions(res);
  });
});
</script>
